<template>
    <div class="app">
      <header>
        <h1 class="title">爆款推荐</h1>
        <p class="subtitle">精选热门商品，尽在此处！</p>
      </header>
  
      <section class="product-list">
        <div v-for="product in products" :key="product.id" class="product-card">
          <img :src="product.image" :alt="product.name" class="product-image"/>
          <div class="product-info">
            <h3 class="product-name">{{ product.name }}</h3>
            <p class="product-category">{{ product.category }}</p>
            <p class="product-price">￥{{ product.price }}</p>
            <button @click="addToCart(product)" class="btn-add-to-cart">加入购物车</button>
          </div>
        </div>
      </section>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    name: 'App',
    setup() {
      const products = ref([
        { id: 1, name: '无线蓝牙耳机', price: 99, category: '电子产品', image: 'https://cbu01.alicdn.com/img/ibank/2019/357/398/11131893753_1123328634.jpg' },
        { id: 2, name: '夏季时尚连衣裙', price: 299, category: '服装', image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.-wNetAoPOsuRULX-vf_6hgHaLH?rs=1&pid=ImgDetMain' },
        { id: 3, name: '进口零食大礼包', price: 30, category: '食品', image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.MBJFQteIZhmLugXyv1bZDgHaHa?rs=1&pid=ImgDetMain' },
        { id: 4, name: '智能扫地机器人', price: 800, category: '家电', image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.PpnxktKOOMdclEPvDMeNxAHaHa?rs=1&pid=ImgDetMain' },
        { id: 5, name: '高性能游戏鼠标', price: 120, category: '电子产品', image: 'https://m.360buyimg.com/ceco/jfs/t1/114850/22/6483/47432/5eba70e5Ebfe473a0/5201bc965f3ea368.jpg!q70.jpg' },
        { id: 6, name: '男士休闲T恤', price: 450, category: '服装', image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.h0dKtVcX9gm8yvj2Zr-ecQHaHa?rs=1&pid=ImgDetMain' },
        { id: 7, name: '空气炸锅', price: 700, category: '家电', image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.2DJozIcnFP1PQ45XDwM8KgHaHa?rs=1&pid=ImgDetMain' },
        { id: 8, name: '低脂健身零食', price: 50, category: '食品', image: 'https://ts1.cn.mm.bing.net/th/id/R-C.aaa0eab9cefce39828a4a27df171608e?rik=%2b99eHlD%2bJJ5Gzg&riu=http%3a%2f%2fimg13.360buyimg.com%2fn1%2fs800x800_jfs%2ft1%2f179879%2f8%2f11841%2f116385%2f60dc35b9Ed2b53e29%2f84138a6ea55ffe4e.jpg&ehk=6knL%2bc0uyeon0reoerK5QjtnjE3QBh3tb%2fHe7WpFchU%3d&risl=&pid=ImgRaw&r=0' },
        { id: 9, name: '时尚牛仔裤', price: 150, category: '服装', image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.D_YOrlGbvdNq5Oi9fUcIVAHaHa?rs=1&pid=ImgDetMain' },
        { id: 10, name: '超高清投影仪', price: 400, category: '家电', image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.C42r1Embh_fUFB5uuB4rTgHaHa?rs=1&pid=ImgDetMain' },
        { id: 11, name: '智能手表', price: 95, category: '电子产品', image: 'https://img14.360buyimg.com/pop/jfs/t1/88599/27/37392/70582/63ee2043F4e0b9ec0/fdc805561a69f9b8.png' },
        { id: 12, name: '有机水果礼盒', price: 300, category: '食品', image: 'https://ts1.cn.mm.bing.net/th/id/R-C.f88e812b77f555d19dda9f04bdd170c5?rik=C3pYROYrY%2bwLjg&pid=ImgRaw&r=0' },
        { id: 13, name: '多功能微波炉', price: 500, category: '家电', image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.e88poIL9oyHHnGV4_pjKzAHaHa?rs=1&pid=ImgDetMain' },
        { id: 14, name: '运动速干衣', price: 80, category: '服装', image: 'https://img.alicdn.com/bao/uploaded/i1/903830333/O1CN01VpFnRu1EKYj7jnVF9_!!903830333.jpg' },
        { id: 15, name: '便携式充电宝', price: 650, category: '电子产品', image: 'https://img.alicdn.com/i4/2215006783487/O1CN01SIa4F41bd5tLmV72k_!!2215006783487.jpg' },
        { id: 16, name: '冬季袜子', price: 10, category: '服装', image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.EderhvyBKP0jabGSDLfCjgHaHa?rs=1&pid=ImgDetMain' },
        { id: 17, name: '冬季外套', price: 100, category: '服装', image: 'https://img.alicdn.com/imgextra/i3/2213753908498/O1CN01awxjPg2Ce8YpXESlx_!!0-item_pic.jpg' },
        { id: 18, name: 'USB数据线', price: 15, category: '电子产品', image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.glQAn6-UWZztXhGT9bFhNAHaHa?rs=1&pid=ImgDetMain' },
        { id: 19, name: '健身哑铃套装', price: 200, category: '运动', image: 'https://img.alicdn.com/bao/uploaded/i4/2023007415/O1CN01xQbS6M24e7gi3jaWr_!!0-item_pic.jpg' },
        { id: 20, name: '纯棉浴巾', price: 50, category: '家居', image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.hqHjb-a3EKEDKoQXnqAegwHaHa?rs=1&pid=ImgDetMain' },
        { id: 21, name: '迷你电风扇', price: 80, category: '家电', image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.he6wMb7xkhSoCXcbU5ghaAHaE8?rs=1&pid=ImgDetMain' },
        { id: 22, name: '智能台灯', price: 120, category: '家居', image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.yZi5L_mx03nd603cSaXHdQHaFj?rs=1&pid=ImgDetMain' },
        { id: 23, name: '防晒遮阳帽', price: 90, category: '服装', image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.18dt4Exh7aXsrgB81cJKbAHaHa?rs=1&pid=ImgDetMain' },
        { id: 24, name: '折叠露营椅', price: 150, category: '户外', image: 'https://img.alicdn.com/imgextra/i2/6000000004719/O1CN01G7RizY1kjLomWhBM4_!!6000000004719-0-tbvideo.jpg' },
        { id: 25, name: '智能水杯', price: 65, category: '电子产品', image: 'https://ts1.cn.mm.bing.net/th/id/R-C.ee5d3538a811703e25f7f7198350b9e7?rik=C5jUyqgvtHry5w&pid=ImgRaw&r=0' },
        { id: 26, name: '瑜伽垫', price: 120, category: '运动', image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.VujkNvKCNnKwxsZehJ849QHaH7?rs=1&pid=ImgDetMain' },
        { id: 27, name: '复古皮包', price: 350, category: '服装', image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.4ickO0ZtKTJZZfVmbtThRgHaHa?rs=1&pid=ImgDetMain' }
      ]);
  
      const addToCart = (product) => {
        alert(`${product.name} 已加入购物车！`);
      };
  
      return {
        products,
        addToCart
      };
    }
  };
  </script>
  
  <style scoped>
  /* 通用样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    color: #333;
  }
  
  /* 页面标题 */
  .title {
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    color: #27ba9b;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    margin-top: 2rem;
  }
  
  .subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 2rem;
  }
  
  /* 商品列表 */
  .product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  
  /* 商品卡片 */
  .product-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* 商品图片 */
  .product-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .product-card:hover .product-image {
    transform: scale(1.1);
  }
  
  /* 商品信息 */
  .product-info {
    padding: 16px;
    text-align: center;
  }
  
  .product-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
  }
  
  .product-category {
    font-size: 1rem;
    color: #777;
    margin-bottom: 12px;
  }
  
  .product-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #E91E63;
    margin-bottom: 16px;
  }
  
  .btn-add-to-cart {
    background-color: #27ba9b;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .btn-add-to-cart:hover {
    background-color: #45a049;
  }
  
  @media (max-width: 768px) {
    .product-list {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
  
    .product-name {
      font-size: 1.1rem;
    }
  
    .product-price {
      font-size: 1.1rem;
    }
  }
  </style>
  